<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/system/'}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen"/>
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen"/>
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen"/>

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-2.1.0.min.js"></script>
    <!-- jQuery Configuration -->
    <!--<script type="text/javascript"
            src="resources/scripts/simpla.jquery.configuration.js"></script>-->

    <!-- dialog弹出框的导入-->
    <link rel="stylesheet" href="resources/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>


    <!-- ztree树形结构 -->
    <link rel="stylesheet" href="resources/widget/zTree/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="resources/widget/zTree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="resources/widget/zTree/jquery.ztree.exhide.min.js"></script>

    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mydialog.js'}"></script>


    <script th:inline="javascript">
        var ztreeObj;
        var ztreeObj2;

        $(function(){
            //-----------------初始化终端分组树----------------------
            getClientZtree("ztree_div", {
                showIcon: true,
                editenable: true,
                showRemoveBtn: true,
                showRenameBtn: false,
                dragIsCopy: true,
                dragIsMove: true,
                beforeClick: zbeforeClick,
                beforeRemove: zbeforeRemove,
                beforeDrag: zbeforeDrag,
                beforeDrop: zbeforeDrop,
                onDrop: zonDrop,
                onClick: zClick,
                init: function(zObject){
                    ztreeObj = zObject;

                    //找到所有终端节点
                    var clients = ztreeObj.getNodesByParam("isClient", 1, null);
                    ztreeObj.hideNodes(clients);
                }
            });

            //---------------------初始化第二棵树------------------
            var setting = {
                data: {
                    key: {
                        name: "gname"
                    },
                    simpleData: {
                        enable: true,
                        pIdKey: "pid"
                    }
                },
                edit: {
                    enable: true,
                    showRemoveBtn: true,
                    showRenameBtn: false,
                    drag: {
                        isCopy: true,
                        isMove: true
                    }
                },
                callback: {
                    beforeClick: zbeforeClick,
                    beforeRemove: zbeforeRemove,
                    beforeDrag: zbeforeDrag,
                    beforeDrop: zbeforeDrop,
                    onDrop: zonDrop
                }
            };
            ztreeObj2 = $.fn.zTree.init($("#ztree_div2"), setting);
        });

        /**
         * 弹出框
         */
        function add_dialog(){
            openDialog("dialog_div", "添加群组", 300, 300);
        }

        /**
         * ztree对应的操作方法
         */
        //点击之前的方法触发
        function zbeforeClick(treeId, treeNode, clickFlag){
            if(clickFlag == 2){
                return false;
            }
            return true;
        }

        //移除的方法触发
        function zbeforeRemove(treeId, treeNode){
            var isClient = treeNode.isClient == 1 ? true : false;
            var id = isClient ? treeNode.userid : treeNode.id;
            var gid = -1;
            var msg = "确定移除该分组？（该分组下的终端会移动到默认分组下）";

            if(treeNode.id == 1){
                alert("不能移除'默认分组'！");
                return false;
            }

            if(isClient){
                var nodes = ztreeObj.getNodesByParam("userid", treeNode.userid);
                if(nodes.length == 1){
                    alert("至少需要保留一个终端设备！");
                    return false;
                }
                gid = treeNode.getParentNode().id;
                msg = "确定将该终端设备移出这个群组？";
            }

            if(confirm(msg)){
                //开始移除
                myajax({
                    url: [[${#request.getContextPath()}]] + "/client/deletegroup",
                    data: {id:id, gid:gid, isClient:isClient},
                    success: function(data){
                        if(data == true){
                            location.reload();
                        } else {
                            alert("删除失败！");
                        }
                    }
                });
                return true;
            }

            return false;
        }

        //拖拽之前触发
        function zbeforeDrag(treeId, treeNodes){
            if(treeNodes[0].id == 1){
                alert("'默认分组'不能移动！");
                return false;
            }
            return true;
        }

        //拖拽结束之前触发
        function zbeforeDrop(treeId, treeNodes, targetNode, moveType, isCopy){
            // var treeId = treeNodes[0].id == null ? treeNodes[0].userid : treeNodes[0].id;
            var targetId = targetNode == null ? -1 : targetNode.id;
            var isClient = treeNodes[0].isClient == 1 ? true : false;

            var treeIds = new Array();
            for(var i = 0; i < treeNodes.length; i++){
                if(isClient){
                    //是终端
                    treeIds.push(treeNodes[i].userid);
                } else {
                    //是群组
                    treeIds.push(treeNodes[i].id);
                }
            }
            //原父节点id
            var oldpid = isClient ? treeNodes[0].getParentNode().id : -1;


            if(targetNode != null && targetId == null && moveType == "inner"){
                alert("不能移动到'终端'设备下！！");
                return false;
            }


            // console.log("移动的节点：" + treeNodes[0].gname + " 移动到的节点：" + targetNode.gname + "  关系：" + moveType + " " + isClient);

            //确定是否可复制
            //复制行为
            //查询复制到的父节点下所有的子节点
            var nodes = ztreeObj.getNodesByParam("pid", targetNode.id);
            for(var x = 0; x < treeNodes.length; x++) {
                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i].userid != null && nodes[i].userid == treeNodes[x].userid) {
                        alert("该群组下已经有'" + treeNodes[x].gname + "'这个终端，请勿重复添加！");
                        return false;
                    }
                }
            }

            //开始移动
            $.ajax({
                type: "POST",
                traditional: true,
                url:[[${#request.getContextPath()}]] + "/client/move",
                data: {ids:treeIds,  pid: targetId, oldpid: oldpid, isClient: isClient, isCopy: isCopy}
            });

            return true;
        }

        //拖拽结束之后触发
        function zonDrop(){
            location.reload();
        }

        //点击节点方法
        function zClick(event, treeId, treeNode){
            //判断是否点击分组节点
            if (treeNode.isClient == 0){
                //点击的分组节点，将该分组节点全部显示到另外一颗树下

                //清空该树下的所有节点
                var nodes = ztreeObj2.getNodes();
                for (var i=nodes.length - 1; i >= 0; i--) {
                    ztreeObj2.removeNode(nodes[i]);
                }

                //添加到新的树下
                ztreeObj2.addNodes(null, -1, treeNode);
                ztreeObj2.showNodes(ztreeObj2.transformToArray(ztreeObj2.getNodes()));
            }
        }
    </script>

    <style>
        div.ztree {
            margin-top: 20px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 220px;
            height: 600px;
            overflow-y: scroll;
            overflow-x: auto;
        }
    </style>

</head>
<body>
<div id="main-content">
    <div class="content-box">
        <!-- End .content-box-header -->
        <div class="content-box-content">
            <h2>群组管理</h2>

            <br/>
            <hr/>
            <br/>

            <button class="mybutton" onclick="add_dialog();">添加分组</button>
            <span><font color="red">*按住ctrl+移动进行复制</font></span>
            <div style="height: 650px;">
                <!-- 树形结构 -->
                <div id="ztree_div" class="ztree" style="float: left;width: 250px;"></div>
                <div id="ztree_div2" class="ztree" style="float: left;width: 250px; margin-left: 20px"></div>
            </div>
        </div>
        <!-- End .content-box-content -->
    </div>
</div>
<!-- End #main-content -->

<div id="dialog_div" style="display: none;">
    <form th:action="${#request.getContextPath() + '/client/addgroup'}" method="post">
        <fieldset>
            <p>
                <label>群组名称</label> <input
                    class="text-input" type="text"
                    name="gname" />
            </p>
            <p>
                <button type="submit" class="mybutton">提交</button>
            </p>
        </fieldset>
    </form>
</div>

</body>
</html>